<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'BiaoZhi' })

const form = reactive({
  takeNoteEnabled: true,
  takeNoteTime: '',
  reportEnabled: false,
  reportTime: '',
  loadEnabled: false,
  loadValue: '',
  completeEnabled: false,
  completeValue: '',
  boardEnabled: false,
  boardValue: '',
  departEnabled: true,
  departTime: ''
})
const formRef = ref()

// Validation rules: required only if corresponding enabled flag checked
const rules = {
  takeNoteTime: [
    {
      validator: () => {
        if (form.takeNoteEnabled && (!form.takeNoteTime || form.takeNoteTime === '')) {
          return Promise.reject(new Error('请填写拿单时间'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ],
  reportTime: [
    {
      validator: () => {
        if (form.reportEnabled && (!form.reportTime || form.reportTime === '')) {
          return Promise.reject(new Error('请填写报时时间'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ],
  loadValue: [
    {
      validator: () => {
        if (form.loadEnabled && (!form.loadValue || form.loadValue === '')) {
          return Promise.reject(new Error('请填写装机时间'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ],
  completeValue: [
    {
      validator: () => {
        if (form.completeEnabled && (!form.completeValue || form.completeValue === '')) {
          return Promise.reject(new Error('请填写完成时间'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ],
  boardValue: [
    {
      validator: () => {
        if (form.boardEnabled && (!form.boardValue || form.boardValue === '')) {
          return Promise.reject(new Error('请填写上客时间'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ],
  departTime: [
    {
      validator: () => {
        if (form.departEnabled && (!form.departTime || form.departTime === '')) {
          return Promise.reject(new Error('请填写起飞时间'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ]
}

const save = async () => {
  try {
    await formRef.value.validate()
    // success - placeholder for API call
    ElMessage.success('保存成功')
  } catch (err) {
    // validation errors are shown by element-plus, but you can also log or show message
    console.warn('验证失败', err)
  }
}

// When enabling/disabling checkboxes, run/clear validation for fields
watch(
  () => form.takeNoteEnabled,
  (val) => {
    if (formRef.value) {
      if (val) formRef.value.validateField('takeNoteTime').catch(() => {})
      else formRef.value.clearValidate('takeNoteTime')
    }
  }
)
watch(
  () => form.reportEnabled,
  (val) => {
    if (formRef.value) {
      if (val) formRef.value.validateField('reportTime').catch(() => {})
      else formRef.value.clearValidate('reportTime')
    }
  }
)
watch(
  () => form.loadEnabled,
  (val) => {
    if (formRef.value) {
      if (val) formRef.value.validateField('loadValue').catch(() => {})
      else formRef.value.clearValidate('loadValue')
    }
    if (!val) form.loadValue = ''
  }
)
watch(
  () => form.completeEnabled,
  (val) => {
    if (formRef.value) {
      if (val) formRef.value.validateField('completeValue').catch(() => {})
      else formRef.value.clearValidate('completeValue')
    }
    if (!val) form.completeValue = ''
  }
)
watch(
  () => form.boardEnabled,
  (val) => {
    if (formRef.value) {
      if (val) formRef.value.validateField('boardValue').catch(() => {})
      else formRef.value.clearValidate('boardValue')
    }
    if (!val) form.boardValue = ''
  }
)
watch(
  () => form.departEnabled,
  (val) => {
    if (formRef.value) {
      if (val) formRef.value.validateField('departTime').catch(() => {})
      else formRef.value.clearValidate('departTime')
    }
    if (!val) form.departTime = ''
  }
)
</script>
<template>
  <el-card class="bi-card">
    <el-form ref="formRef" :model="form" :rules="rules" size="small" label-width="0">
      <el-row class="bi-row" align="middle" :gutter="20">
        <el-col :span="24" class="bi-item">
          <div class="label-row">
            <el-checkbox v-model="form.takeNoteEnabled">拿单</el-checkbox>
          </div>
          <div class="input-row">
            <el-form-item prop="takeNoteTime" :required="form.takeNoteEnabled">
              <el-time-picker
                v-model="form.takeNoteTime"
                format="HH:mm"
                placeholder="请选择"
                :disabled="!form.takeNoteEnabled"
              />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24" class="bi-item">
          <div class="label-row">
            <el-checkbox v-model="form.reportEnabled">报时</el-checkbox>
          </div>
          <div class="input-row">
            <el-form-item prop="reportTime" :required="form.reportEnabled">
              <el-time-picker
                v-model="form.reportTime"
                format="HH:mm"
                placeholder="请选择"
                :disabled="!form.reportEnabled"
              />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24" class="bi-item">
          <div class="label-row">
            <el-checkbox v-model="form.loadEnabled">装机</el-checkbox>
          </div>
          <div class="input-row">
            <el-form-item prop="loadValue" :required="form.loadEnabled">
              <el-time-picker
                v-model="form.loadValue"
                format="HH:mm"
                placeholder="请选择"
                :disabled="!form.loadEnabled"
              />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24" class="bi-item">
          <div class="label-row">
            <el-checkbox v-model="form.completeEnabled">完成</el-checkbox>
          </div>
          <div class="input-row">
            <el-form-item prop="completeValue" :required="form.completeEnabled">
               <el-time-picker
                v-model="form.completeValue"
                format="HH:mm"
                placeholder="请选择"
                :disabled="!form.completeEnabled"
              />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24" class="bi-item">
          <div class="label-row">
            <el-checkbox v-model="form.boardEnabled">上客</el-checkbox>
          </div>
          <div class="input-row">
            <el-form-item prop="boardValue" :required="form.boardEnabled">
              <el-time-picker
                v-model="form.boardValue"
                format="HH:mm"
                placeholder="请选择"
                :disabled="!form.boardEnabled"
              />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24" class="bi-item">
          <div class="label-row">
            <el-checkbox v-model="form.departEnabled">起飞</el-checkbox>
          </div>
          <div class="input-row">
            <el-form-item prop="departTime" :required="form.departEnabled">
              <el-time-picker
                v-model="form.departTime"
                format="HH:mm"
                placeholder="请选择"
                size="small"
                :disabled="!form.departEnabled"
              />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="10" class="bi-actions">
          <el-button type="primary w-100px" @click="save">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">
.bi-card {
  padding: 6px 12px;
}

.bi-row {
  display: flex;
  align-items: center;
}

.bi-item {
  display: flex;
  flex-direction: row;
}

.bi-item .label-row {
  margin-right: 10px;
  margin-bottom: 6px;
}

.bi-item .input-row {
  display: flex;
}

.bi-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
